<!DOCTYPE html>
<html lang="zh">
  <head>
    <!-- <meta http-equiv="Content-Type" content="text/html" /> -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title> 3n + 1 Game </title>
	<link rel="stylesheet" href="./machine_plus.css">
</head>

<body>
	<input type="number" id="ipt" placeholder="输入十进制数字"/>
	&nbsp;<span id="cbs">显示</span>队列前的零<input id="cbz" type="checkbox" checked title="点击切换" />
	<!-- Maybe I can make it more beautiful, but I just want keep it simple. -->
	<div id="sticker">
		<p id="cls">X</p>
		<p id="currLoc"></p>
		<p id="rowCnt"></p>
	</div>
	<table>
		<tbody id="insertRow"></tbody>
	</table>
	<script type="text/javascript" src="./machine_plus.js"></script>
	<script type="text/javascript" src="./ternary.js"></script>
	<script>
		'use strict';

		const insertRow = document.querySelector('#insertRow');
		const sticker = document.querySelector('#sticker');
		const rowCnt = document.querySelector('#rowCnt');
		const currLoc = document.querySelector('#currLoc');

		// Show Step In Web
		function showSteps(num) {

			insertRow.textContent = '';

			checkSteps(num);
			// initial track;
			track = Array.from(num.toString(3)).map(e => +e);
			robots = [];

			let cnt = 0, width = 0;

			while (robots.some(e => !!e) || Number.parseInt(track.join(''), 3) >= 2) {

				let tr = document.createElement("tr");

				let td2 = document.createElement("td");
				td2.innerHTML = '<tt>' + robots.map(e => ROBOT_SIGN[e]).join('')
					+ '</tt><tt>' + track.map(e => TRACK_SIGN[e]).join('') + '</tt>';

				tr.appendChild(td2);
				insertRow.appendChild(tr);

				trip();
				// num = step(num);

				// // keep test
				// if (num !== Number.parseInt(track.join(''), 3)) {
				//   alert('Wrong During trip');
				//   console.error(num, num.toString(3), track.join(''));
				//   break;
				// }
				cnt++;
				width = Math.max(track.length, width)
			}

			rowCnt.textContent = `total ${cnt} rows, ${width} width`;

		}

		// add Event Listener
		(() => {
			document.getElementById('ipt').addEventListener('change', function (evn) {
				showSteps(Math.abs(parseInt(this.value, 10)));
			}, false);
			document.getElementById('cls').addEventListener('click', function (evn) {
				sticker.style.visibility = 'hidden';
			}, false);
			document.getElementById('cbz').addEventListener('change', function (evn) {
				fillZero = this.checked;
				document.getElementById('cbs').textContent = this.checked ? '显示' : '清除';
				showSteps(Math.abs(parseInt(document.getElementById('ipt').value, 10)));
			}, false);

			insertRow.addEventListener('click', evt => {
				let target = evt.target, rowIndex = 0;
				switch (target.nodeName) {
					case 'TT':
						rowIndex = target.parentElement.parentElement.rowIndex;
						break;
					case 'TD':
						rowIndex = target.parentElement.rowIndex;
						break;
					case 'TR':
						rowIndex = target.rowIndex;
						break;
					default:
						break;
				}
				// console.log('row : %d , char : %d ',rowIndex, Math.ceil(evt.offsetX / 15));
				currLoc.textContent = `row : ${rowIndex}, col : ${Math.ceil(evt.offsetX / 15)}`;
				sticker.style.visibility = 'visible';
			});
		})();
	</script>

</body>

</html>